<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //删除事件
        var deleteFun=function(){
            var tr= $(this).parent().parent();//获取当前响应的行对象
            var name=tr.find("td:first").text();
            if (confirm("你确定要删除["+name+"]吗？")){
                tr.remove();
            }
            return false;//可以阻止网页的默认操作
        }
        //给添加按钮绑定单击事件
        $(function () {
            $("button:eq(0)").click(function () {
                //获取输入框的值
                var name=$("input[name='n01']").val();
                var email=$("input[name='n02']").val();
                var phone=$("input[name='n03']").val();

                //创建需要添加的标签对象
                var $1 = $("<tr>\n" +
                    "            <td>"+name+"</td>\n" +
                    "            <td>"+email+"</td>\n" +
                    "            <td>"+phone+"</td>\n" +
                    "            <td><a href=\"\">删除</a></td>\n" +
                    "        </tr>");
                //添加数据到要显示的表格中
                $1.appendTo($("table:eq(0)"));
                //alert(name);
                //给添加的行a标签绑上单击事件
                $1.find("a").click(deleteFun);
            })

            //给a绑定单击事件
            $("a").click(deleteFun);//优化后
        })
    </script>
</head>
<body>
    <br/>
    <br/>
    <br/>
    <br/>
    <table align="center" border="solid">
        <tr>
            <th>NAME</th>
            <th>E-mail</th>
            <th>Phone</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>xc</td>
            <td>2404438238@qq.com</td>
            <td>19983604254</td>
            <td><a href="deleteEmp?id=001">删除</a></td>
        </tr>
        <tr>
            <td>lmf</td>
            <td>2404438238@qq.com</td>
            <td>19983604254</td>
            <td><a href="deleteEmp?id=002">删除</a></td>
        </tr>
        <tr>
            <td>fdd</td>
            <td>2404438238@qq.com</td>
            <td>19983604254</td>
            <td><a href="deleteEmp?id=003">删除</a></td>
        </tr>
    </table>
    <br/>
    <br/>
    <br/>

    <div align="center" >
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td>name:</td>
                <td><input type="text" value="请输入姓名" name="n01"/></td>
            </tr>
            <tr>
                <td>E-mail:</td>
                <td><input type="text" value="请输入E-mail" name="n02"/></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input type="text" value="请输入Phone" name="n03"/></td>
            </tr>
            <tr>
                <td><button>添加</button></td>
            </tr>
        </table>
    </div>
</body>
</html>